<template>
    <section class="share-server intelligent-content-bg overflowYAll">
        <div class="intelligent-content-box">
  			<div class="page1" v-show="currentPage==='1'">
                <form-common 
                    @add="add" 
                    @search = "search"
                    :formLabel="formLabel" 
                    :formInline="formInline"
                ></form-common>
  				<table-common 
  					:loading ="loading"
                    @handleCurrentChange = "handleCurrentChange" 
                    :total="total" 
                    @detail="detail" 
                    @edit="edit" 
                    @del="del"  
                    :tableLabel="tableLabel" 
                    :tableData="tableData">
                </table-common>
  			</div>	
    		<div class="page2" v-if="currentPage==='2'"><!--详情-->
    			<collect-detail  v-if="currentPage==='2'" :detailData="detailData" @goBack="goBack"></collect-detail>
    		</div>
    		<div class="page3" v-if="currentPage==='3'"><!--修改-->
    			<share-server-updata  v-if="currentPage==='3'" :id="updataId" :treeSeach="treeSeach"  @goBack="goBack"></share-server-updata>
    		</div>
    		
    		<el-dialog
				  title="提示"
				  :visible.sync="dialog1Visible"
				  width="30%"
				  >
			</el-dialog>
        </div>
    </section>
</template>

<script>
	import shareServerUpdata from './shareServerUpdata'
	import formCommon from "../common/formCommon"
	import tableCommon from "../common/tableCommon"
	import collectDetail from "../common/collectServerDetail"
	import {
		computedShareDetail,
		componentGetYwType,
		componentGetShareCollectList,
		componentCollectAll,
		computedGroupDetail
	} from "../common/js_css_img/serverResourceComputed"
	import {
		apiGetShareCollectList,
    apiShareCollectServerDelete,
	} from "../common/js_css_img/serverResourceApi"
    export default {
    	components:{
    		formCommon,
    		tableCommon,
    		collectDetail,
    		shareServerUpdata
    	},
        data() {
          return {
          	loading:false,
          	updataId:0,
          	total:0,
          	currentPage:"1",
          	dialog1Visible:false,
          	detailLoading:'',
          	formInline:{
          		type:'',
          		myInput:"",
          	},
          	treeSeach:{
          		segment:[],/*网段类型*/
          		info_type:[],/*信息类型*/
          		business_type:[],/*业务类型*/
          	},
          	form:{
					"serviceType":1,       //1是共享类，2是采集类，当你访问的是什么列表传什么
					"businessTypeIds":[],   //业务类型
					"name":"",   //名称
					"pageNum":1,
					"pageSize":10
			},
          	treeSeach:{
          		segment:[],/*网段类型*/
          		info_type:[],/*信息类型*/
          		business_type:[],/*业务类型*/
          	},
          	formLabel:[
           		// {
           		// 	type:'button2',
           		// 	placeholder:'新增',
           		// 	label:'',
           		// 	float:"left",
           		// 	method:'add'
           		// },
          		{
          			type:'button2',
          			placeholder:'搜索',
          			label:'',
          			float:"right",
          			method:'search'
          		},
          		{
          			type:'input',
          			placeholder:'输入服务名称搜索',
          			label:'',
          			model:'inputName',
          			float:"right",
          		},
          		{
          			type:'select',
          			placeholder:'请选择',
          			// label:'业务分类 ：',
          			float:"right",
          			model:'selectName',
          			options:[],
          		},
          	],
          	tableLabel:{
          		name:"服务名称",
          		pushId:'发布服务标识',
          		requestId:'请求者标识',
          		serviceType:'服务类型',
          		fwType:'访问方式',
          		businessType:'业务分类',
          		createTime:'创建时间',
          	},
          	tableData:[],
          	detailData:[
          			{
          				title:"基本信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'服务名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'所选区域',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'访问策略',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'资源标识',
          						value:'',
          						type:'1'
          					},
          					{
          						name:'业务类型',
          						value:'',
          						type:'3'
          					},
          					{
          						name:'信息类型',
          						value:'',
          						type:'3'
          					},
          					{
          						name:'资源描述',
          						value:'',
          						type:'1'
          					},
          					{
          						name:'返回方式',
          						value:'',
          						type:'1'
          					},
          					{
          						name:'输入参数',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'特殊访问策略',
          						value:[],
          						type:'2'
          					}
          				],
          			},
          			{
          				title:"服务方信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'服务方名称',
          						value:'',
          						type:'1'
          					},
          					{
          						name:'服务方联系方式',
          						value:'',
          						type:'1'
          					}
          				],
          			},
          			{
          				title:"请求方信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'名称及联系方式',
          						value:[],
          						type:'2'
          					},
          				],
          			},
          			{
          				title:"输出参数与脱敏列表",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'脱敏参数',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'输出参数',
          						value:[],
          						type:'2'
          					},
          					
          				],
          			},
          		],
          		detailDataReset:[
          			{
          				title:"基本信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'服务名称',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'所选区域',
          						value:"",
          						type:'1'
          					},
          					{
          						name:'访问策略',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'资源标识',
          						value:'',
          						type:'1'
          					},
          					{
          						name:'业务类型',
          						value:'',
          						type:'3'
          					},
          					{
          						name:'信息类型',
          						value:'',
          						type:'3'
          					},
          					{
          						name:'资源描述',
          						value:'',
          						type:'1'
          					},
          					{
          						name:'返回方式',
          						value:'',
          						type:'1'
          					},
          					{
          						name:'输入参数',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'特殊访问策略',
          						value:[],
          						type:'2'
          					}
          				],
          			},
          			{
          				title:"服务方信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'服务方名称',
          						value:'',
          						type:'1'
          					},
          					{
          						name:'服务方联系方式',
          						value:'',
          						type:'1'
          					}
          				],
          			},
          			{
          				title:"请求方信息",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'名称及联系方式',
          						value:[],
          						type:'2'
          					},
          				],
          			},
          			{
          				title:"输出参数与脱敏列表",
          				lebelWidth:"150px",
          				elForm:[
          					{
          						name:'脱敏参数',
          						value:[],
          						type:'2'
          					},
          					{
          						name:'输出参数',
          						value:[],
          						type:'2'
          					},
          					
          				],
          			},
          		],
          };
        },
        methods: {
        	handleCurrentChange(val){
        		this.form.pageNum=val;
        		this.getList();
        	},
        	onSubmit(){
        		
        	},
        	add(){
        		
        	},
        	search(val){
                //解决区域为空时，搜索框输入内容搜索不出东西
                if(val.selectName!=undefined){
                    this.form.businessTypeIds = [val.selectName];
                }
                console.log(val.selectName);
        		this.form.name = val.inputName;
        		this.getList();
        	},
        	edit(scope){
        		if(scope.row.serviceType=="编排"){/*跳到服务编排那里更新*/
        			this.$router.push({name:'serviceChore2',params:{nodepublicId:scope.row.id}});
        		}else{
        			this.updataId = scope.row.id;
        			this.currentPage="3";
        		}
        		
        	},
        	detail(scope){
        			console.log(scope);
        			  this.detailLoading = this.$loading({
			          lock: true,
			          text: 'Loading',
			          spinner: 'el-icon-loading',
			          background: 'rgba(0, 0, 0, 0.7)'
			        });
        			
        			if(scope.row.serviceType=='编排'){
        				computedGroupDetail(this,scope.row.id)/*编排的详情*/
        			}else{
        				computedShareDetail(this,scope.row.id);/*共享的详情*/
        			}
        	},
            del(scope){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  apiShareCollectServerDelete({},scope.row.id);
                  setTimeout(()=>{this.getList()},1000);
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
            },
        	goBack(){
        		this.currentPage="1";
        	},
        	getList(){
        		this.tableData=[];
                console.log('listSearchShare')
                this.loading = true;
        		apiGetShareCollectList(this.form).then((res)=>{
        		if(res.data.code==='S100101'){
			 		let fwTypeArray = ["",'实时接口','文件','数据库'];
			 		this.total =res.data.data.total;
                    console.log(res.data.data.list)
                    let serviceType = ["",'共享','采集','编排'];
			 		for(let i in res.data.data.list){
			 			this.tableData.push(
			 				{
			 					name:res.data.data.list[i].name,
			 					pushId:res.data.data.list[i].id,
          						requestId:res.data.data.list[i].request.map((i)=>{
          							return i.requesterId+','
          						}),
			 					serviceType:serviceType[res.data.data.list[i].serviceType],
			 					fwType:fwTypeArray[res.data.data.list[i].fwType],
			 					businessType:res.data.data.list[i].resourceService.businessType,
			 					createTime:res.data.data.list[i].createTime,
			 					qiYong:res.data.data.list[i].status,
			 					id:res.data.data.list[i].id,
			 				}
			 			)
			 		}
			 		  this.loading = false;
			 	}
        		})

        	}
        },
        mounted(){
        	componentGetYwType(this,'');
        	componentCollectAll(this);
        	this.formLabel[2].options=this.treeSeach.business_type;
        	this.getList();
        	componentGetYwType(this,'');
        }
  };
</script>

<style scoped="scoped">
    
</style>